<script setup>
import { useWMTSStore } from '@/stores'

const wmtsStore = useWMTSStore()

const wmtsInfo = reactive({
  DPI: '',
  Title: '',
  TileMatrixSetName: '',
  TopLeftCorner: '',
  BoundingBox: '',
  MatrixIds: '',
  ScaleDenominator: '',
  Resolution: ''
})

watch(
  () => wmtsStore.currentTileMatrixSet,
  (newTileMatrixSet) => {
    const { DPI, TileMatrixSetName, TileMatrix, SupportedCRS } = newTileMatrixSet
    wmtsInfo.DPI = DPI
    wmtsInfo.Title = wmtsStore.currentLayerTitle
    wmtsInfo.TileMatrixSetName = TileMatrixSetName
    wmtsInfo.TopLeftCorner = TileMatrix.TopLeftCorner[0]
    wmtsInfo.BoundingBox = wmtsStore.getTileMatrixSetBBox(SupportedCRS)
    wmtsInfo.MatrixIds = TileMatrix.Identifier
    wmtsInfo.ScaleDenominator = TileMatrix.ScaleDenominator
    wmtsInfo.Resolution = TileMatrix.Resolution
  }
)
</script>

<template>
  <n-card class="flex-1 h-195px" size="small" title="WMTS基本信息">
    <n-infinite-scroll style="height: 140px" :distance="5">
      <n-descriptions label-placement="left" :column="1">
        <n-descriptions-item label="DPI" :span="2">{{ wmtsInfo.DPI }}</n-descriptions-item>
        <n-descriptions-item label="地图" :span="2">{{ wmtsInfo.Title }}</n-descriptions-item>
        <n-descriptions-item label="矩阵集" :span="2">{{ wmtsInfo.TileMatrixSetName }}</n-descriptions-item>
        <n-descriptions-item label="左上角起算点" :span="2">{{ wmtsInfo.TopLeftCorner }}</n-descriptions-item>
        <n-descriptions-item label="范围" :span="2">{{ wmtsInfo.BoundingBox }}</n-descriptions-item>
        <n-descriptions-item label="矩阵ID(MatrixIds)" :span="2">{{ wmtsInfo.MatrixIds }}</n-descriptions-item>
        <n-descriptions-item label="比例尺分母" :span="2">
          <n-ellipsis expand-trigger="click" line-clamp="1" style="max-width: 1000px">
            {{ wmtsInfo.ScaleDenominator }}
            <template #tooltip>
              <div style="text-align: center">比例尺分母详细信息</div>
            </template>
          </n-ellipsis>
        </n-descriptions-item>
        <n-descriptions-item label="分辨率(Resolution)" :span="2">
          <n-ellipsis expand-trigger="click" line-clamp="1" style="max-width: 900px">
            {{ wmtsInfo.Resolution }}
            <template #tooltip>
              <div style="text-align: center">分辨率(Resolution)详细信息</div>
            </template>
          </n-ellipsis>
        </n-descriptions-item>
      </n-descriptions>
    </n-infinite-scroll>
  </n-card>
</template>
